<template>
  <div class="code-container">
    <!-- START CODEFORM -->
    <div class="code-container-left">
      <el-form
        :model="codeForm"
        :rules="codeRules"
        ref="codeForm"
        label-width="120px"
      >
        <el-form-item label="新建数量:" prop="number">
          <el-input-number
            size="small"
            v-model="codeForm.number"
            @change="handleChange"
            :min="10"
            :max="1000"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="二维码状态:" prop="isOn">
          <el-select size="small" v-model="codeForm.isOn" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.dictKey"
              :label="item.dictValue"
              :value="item.dictKey"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="服务热线:" prop="phone">
          <el-input
            type="tel"
            size="small"
            v-model="codeForm.phone"
            placeholder="请输入服务热线"
            style="width: 215px"
            maxlength="11"
          ></el-input>
        </el-form-item> -->
        <el-form-item label="二维码中间logo:" prop="qrcodeLogo">
          <el-upload
            ref="uploadQRcodeLogo"
            action="/api/blade-resource/oss/endpoint/put-file-attach"
            list-type="picture-card"
            :http-request="httpQrcodeLogoRequest"
            :limit="1"
            :on-success="handleQrcodeLogoChange"
            :before-upload="beforeUpload"
            :on-remove="handleRemove"
            :on-preview="imgPreview"
          >
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="备注:" prop="remark">
          <el-input
            type="textarea"
            :autosize="{ minRows: 4}"
            size="small"
            v-model="codeForm.remark"
            placeholder="请输入备注描述"
            maxlength="250"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <!-- END CODEFORM -->
    <!-- START QRCODE -->
    <div class="code-container-right">
      <img class="qrcode-bgd" src="/img/pay-logo/qrcode-bgd.jpg" alt="图片加载失败" />
      <div class="qrcode-box-line">
        <img class="qrcode-img" src="/img/pay-logo/qrcode.png" alt="二维码加载失败" />
        <div class="qrcode-center-logo" v-if="codeForm.qrcodeLogo">
          <img :src="codeForm.qrcodeLogo" alt="logo图片加载失败" />
        </div>
      </div>
    </div>
    <!-- END QRCODE -->
    <el-image-viewer
        style="z-index: 99999;"
        v-if="imgShow"
        :on-close="()=>{ imgShow = false }"
        :url-list="imgUrlList"
      ></el-image-viewer>
  </div>
</template>

<script>
import { getDictionary } from "@/api/system/dict";
import { uploadPublic } from "@/api/system/oss";

let id = 10;
export default {
  props: {
    codeForm: Object,
  },
  data() {
    return {
      imgShow:false,
      imgUrlList:[],
      codeRules: {
        number: [
          { required: true, message: "请输入新建数量", trigger: "blur" },
        ],
        isOn: [
          { required: true, message: "请选择二维码状态", trigger: "blur" },
        ],
        // bottomLogoType: [
        //   { required: true, message: "请选择支付方式", trigger: "blur" },
        // ],
        // word: [
        //   { required: true, message: "请输入文字描述", trigger: "blur" },
        // ],
      },
      options: [], //字典
    };
  },
  computed: {
    // payLogoImg() {
    //   for ( let index = 0;index < this.codeForm.bottomLogoTypeList.length;index++ ) {
    //     if (this.codeForm.bottomLogoTypeList[index].bottomLogoType == 6) {
    //       return true;
    //     }
    //   }
    // },
  },
  created() {
    this.doGetDicts();
  },
  methods: {
    /* 预览图片 */
    imgPreview(file) {
      this.imgUrlList[0] = file.url;
      this.imgShow = true;
    },
    /* 字典 */
    doGetDicts() {
      getDictionary({code: 'is_on'}).then(res => {
        this.options = res.data.data;
      });
    },
    beforeUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 3;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG 和 Png 格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 3MB!");
        return false;
      }
      const isWidth = 500;
      const isHeight = 500;
      const isSize = new Promise(function(resolve, reject) {
        let width = isWidth;
        let height = isHeight;
        let _URL = window.URL || window.webkitURL;
        let img = new Image();
        img.onload = function() {
            let valid = img.width <= width && img.height <= height;
            valid ? resolve() : reject();
        }
        img.src = _URL.createObjectURL(file);
      }).then(() => {
        return file;
      }, () => {
        this.$message.error(`上传文件的图片大小不合符标准, 请上传${isWidth}*${isHeight}像素内的图片!`);
        return Promise.reject();
      });
      return isJPG && isLt2M && isSize;
    },
    /* 二维码中间logo 图片上传 */
    httpQrcodeLogoRequest(option) {
      uploadPublic(option.file).then((res) => {
        // this.codeForm.qrcodeLogo = res.data.data.attachId;
        this.codeForm.qrcodeLogo = res.data.data.link;
      });
    },
    /* 二维码中间logo 赋值回显 */
    handleQrcodeLogoChange(res) {
      if (res.code == 1) {
        //这里根据接口返回的去判断
        this.codeForm.qrcodeLogo = res.data.img_path; //拿到图片的路径
      }
    },
    /* 二维码中间logo 删除回调 */
    handleRemove() {
      this.codeForm.qrcodeLogo = ""; //拿到图片的路径
    }

  },
};
</script>

<style lang="scss" scoped>
.code-container {
  width: 100%;
  display: flex;
  .code-container-left {
    width: 500px;
    margin-right: 30px;
  }
  .code-container-right {
    width: 350px;
    height: 500px;
    position: relative;
    .qrcode-bgd{
      width: 350px;
      position: absolute;

    }
    .qrcode-box-line {
      position: absolute;
      top: 92px;
      left: 69px;
      z-index: 10;
      width: 180px;
      height: 180px;
      border-radius: 15px;
      // border: 2px solid red;
      padding: 19px 14px 14px 14px;
      position: relative;

      .qrcode-img {
        width: 100%;
        height: 100%;
      }
      .qrcode-center-logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 50px;
        height: 50px;
        // border: 1px solid #ffffff;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
